<template>
	<div>
		文字<DatePicker v-model="value" style="margin:20px;width:150px"/>
		<DatePicker v-model="value" shape="round" style="margin:20px;width:150px"/>
		<DatePicker v-model="value" shape="noBorder" style="margin:20px;width:150px"/>
		<DatePicker v-model="value" shape="noBorder" disable style="margin:20px;width:150px"/>
		<DatePicker v-model="value" disable style="margin:20px;width:150px"/>
		<br/>
		{{valueStr(value)}}
		<div>
			<DatePicker v-model="datetime" type="datetime" style="margin:20px;width:220px"/>
			{{valueStr(datetime)}}
		</div>
		<div>
			<DatePicker v-model="datetime" type="datetime" empty-default style="margin:20px;width:220px"/>
			{{valueStr(datetime)}}
		</div>
		<DatePicker v-model="value2" type="dateRange" style="margin:20px;width:300px"/>
		<br/>
		{{value2Str}}
	</div>
</template>

<script>
import DatePicker from '@/components/pc/date-picker';
import {dateFormat} from '@/util/common';

export default {
	name:'index',
	components:{
		DatePicker,
	},
	data(){
		return {
			value:new Date(),
			datetime:new Date(),
			value2:null,
		};
	},
	computed:{
		value2Str(){
			if(this.value2){
				return dateFormat(this.value2.from,'yyyy年M月d日 HH:mm:ss')+
					' -- '+
				dateFormat(this.value2.to,'yyyy年M月d日 HH:mm:ss');
			}
			return '';
		}
	},
	created(){
	},
	methods:{
		valueStr(value){
			if(value){
				return dateFormat(value,'yyyy年M月d日 HH:mm:ss');
			}
			return '';
		},
	}
};
</script>

<style lang="scss">

</style>
